<template>
    <div class="query-order">
        <p class="title">查询</p>
        <el-row class="top-button">
            <el-col :span="8">
                <span class="query-date" :style="btnIndex==1?btnColor:bColor" @click="queryByDate(1)">
                <b>2000.00</b><br>本日销售金额
            </span>
            </el-col>
            <el-col :span="8">
                <span class="query-date" :style="btnIndex==2?btnColor:bColor" @click="queryByDate(2)">
                 <b>2000.00</b><br>本周销售金额
            </span>
            </el-col>
           <el-col :span="8">
                <span class="query-date" :style="btnIndex==3?btnColor:bColor" @click="queryByDate(3)">
                 <b>2000.00</b><br>本月销售金额
            </span>
           </el-col>
        </el-row>
        <div class="table">
            <el-table :data="orderData" style="width: 100%"
                      :header-cell-style="{background:'rgb(45, 109, 167)', color:'rgb(225, 225, 225)'}"
                      :row-style="tableStyle"
            >
                <el-table-column prop="orderNo" label="单号" />
                <el-table-column prop="time" label="营业时段" />
                <el-table-column prop="foodName" label="名称"/>
                <el-table-column prop="price" label="价格"/>
            </el-table>
        </div>
        <div class="page">
            <div>
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="100"
                        prev-text="上一页"
                        next-text="下一页"
                />
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "QueryOrder",
        created() {
        },
        data() {
            return {
                btnIndex: 1,
                bColor: {
                    backgroundColor: 'white',
                },
                btnColor: {
                    backgroundColor: 'rgb(255, 237, 229)',
                },
                orderData: [{
                    orderNo: 2022121612444444,
                    time: '早餐',
                    foodName: '小白菜',
                    price: '￥100'
                }, {
                    orderNo: 2022121612444444,
                    time: '早餐',
                    foodName: '小白菜',
                    price: '￥100'
                }, {
                    orderNo: 2022121612444444,
                    time: '早餐',
                    foodName: '小白菜',
                    price: '￥100'
                }, {
                    orderNo: 2022121612444444,
                    time: '早餐',
                    foodName: '小白菜',
                    price: '￥100'
                }, {
                    orderNo: 2022121612444444,
                    time: '早餐',
                    foodName: '小白菜',
                    price: '￥100'
                },{
                    orderNo: 2022121612444444,
                    time: '早餐',
                    foodName: '小白菜',
                    price: '￥100'
                },{
                    orderNo: 2022121612444444,
                    time: '早餐',
                    foodName: '小白菜',
                    price: '￥100'
                },{
                    orderNo: 2022121612444444,
                    time: '早餐',
                    foodName: '小白菜',
                    price: '￥100'
                },{
                    orderNo: 2022121612444444,
                    time: '早餐',
                    foodName: '小白菜',
                    price: '￥100'
                },{
                    orderNo: 2022121612444444,
                    time: '早餐',
                    foodName: '小白菜',
                    price: '￥100'
                }]
            }
        },
        methods: {
            queryByDate(index) {
                this.btnIndex = index;
            },
            tableStyle({rowIndex}){
                if(rowIndex%2==0){
                    return 'background:rgb(237,243,249)  !important';
                }
                return 'background:white  !important';
            }
        }
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
        user-select: none;
    }
    .query-order > .title,
    .query-order > .top-button,
    .query-order > .table,
    .query-order > .page {
        margin-left: 1em;
        margin-right: 1.5em;
        margin-top: 1.5%;
    }
    .query-order > .title {
        font-weight: bolder;
        font-size: 18px;
    }

    .query-order > .top-button  span {
        cursor: pointer;
        display: inline-block;
        text-align: center;
        padding-top: 15px;
        border-radius: 5px;
        height: 66px;
        width: 100%;
        line-height: 22px;
    }

    .query-order > .top-button  span > b {
        color: rgb(255, 78, 0);
        font-size: 20px;
    }

    .page {
        background-color: white;
        padding: 6px;
    }
    .query-order>.page>div{
        width: fit-content;
        margin:0 auto;
    }
</style>